<!-- 应用访问关系表：增加 / 修改 -->
<template>
    <div class="vue-box submit-box--dialog" style="width: 600px; padding-right: 2em;">
        <div class="c-card">
            <el-form :inline="false" label-width="8em">
<!--                <in-input name="数据 id：" v-model="state.model.id" disabled></in-input>-->
                <in-item name="小提示：">
                    <span class="c-remark">如果您此处设定的应用访问关系已有旧记录，则旧记录会被自动删除。</span>
                </in-item>
                <in-input name="用户 id：" v-model="state.model.userId"></in-input>
                <in-item name="访问关系：">
                    <el-radio-group v-model="state.model.visit" size="default">
                        <el-radio-button label="允许登录" :value="1"></el-radio-button>
                        <el-radio-button label="禁止登录" :value="2"></el-radio-button>
                        <el-radio-button label="跟随应用配置" :value="3"></el-radio-button>
                    </el-radio-group>
                </in-item>
                <in-item name="指定应用：">
                    <el-select v-model="state.model.clientId" filterable allow-create clearable @change="f5ClientModel">
                        <el-option
                            v-for="item in state.clientList"
                            :label="item.name + '&emsp;—— ' + ['', '[ 公开应用 ]', '[ 私有应用 ]'][item.isPublic] "
                            :value="item.id" :key="item.id">
                        </el-option>
                    </el-select>
                    <span class="c-remark">
                        <template v-if="state.clientModel">
                            <template v-if="state.clientModel.isPublic === 1">公开应用默认所有用户均可登录，你可以在此设定禁止哪个用户登录</template>
                            <template v-if="state.clientModel.isPublic === 2">私有应用默认所有用户均无法登录，你可以在此设定允许哪个用户登录</template>
                        </template>
                        <template v-else>请选择一个应用</template>
                    </span>
                </in-item>
                <in-item name="已选定规则：">
                    <p style="width: 100%;">
                        <span v-if="state.model.visit === 1" class="c-remark" style="color: green;">
                            允许用户 {{ state.model.userId }} 登录应用：{{ state.clientModel?.name }}
                        </span>
                        <span v-if="state.model.visit === 2" class="c-remark" style="color: red;">
                            禁止用户 {{ state.model.userId }} 登录应用：{{ state.clientModel?.name }}
                        </span>
                        <span v-if="state.model.visit === 3" class="c-remark" style="color: #888;">
                            跟随应用配置决定是否允许登录：私有应用禁止登录，公开应用允许登录
                        </span>
                    </p>
                </in-item>
            </el-form>
        </div>
    </div>
</template>

<script setup name="sys-client-visit-add">
import {getCurrentInstance, onMounted} from "vue";
const { proxy } = getCurrentInstance();

// 获取插值 
const prop = defineProps({
    param: {type: Object}
})

// ------------------ 数据 ------------------
const state = reactive({
    id: prop.param.id || 0,  // 获取传值id （0=添加，非0=修改）
    model: {    // 数据 Model
        id: '',		// 记录id 
        clientId: prop.param.clientId ?? '',		// 应用ID 
        userId: prop.param.userId ?? '',		// 用户ID 
        visit: 1,		// 所属关系 (1=允许访问,2=禁止访问, 3=跟随应用) 
        createTime: '',		// 创建时间 
    },
    clientModel: null, // 选中的 clientModel 
    clientList: []  // 应用列表
})

// 组件加载时触发
onMounted(() => {
    f5ClientList();
    f5();
})

// ------------------ 函数 ------------------
// 渲染旧数据  
const f5 = function (){
    if(state.id === 0) {
        // state.model = createModel();
    } else {
        sa.ajax('/SysClientVisit/getById?id=' + state.id, function (res) {
            if(!res.data) {
                return sa.alert('数据不存在');
            }
            state.model = res.data;
            f5ClientModel();
        })
    }
}

// 刷新 ClientList
const f5ClientList = function() {
    sa.ajax('/SysClient/getList?pageSize=1000', function(res) {
        state.clientList = res.data;
    }, {msg: null});
};

// 刷新选中的 ClientModel 
const f5ClientModel = function() {
    // 如果没有选中，则设定为null
    if(!state.model.clientId) {
        return state.clientModel = null;
    }
    // 先尝试从本地列表里寻找
    for (const item of state.clientList) {
        if(item.id === state.model.clientId) {
            state.clientModel = item;
            return;
        }
    }
    // 提交请求，获取选中的这个 clientId 的信息 
    sa.ajax('/SysClient/getById?id=' + state.model.clientId, function(res) {
        state.clientModel = res.data;
    }, {msg: null});
};

// 提交表单 
defineExpose({
    ok: function () {
        // 表单校验 
        const model = state.model;

        // 如果是增加
        if(state.id === 0) {
            sa.ajax('/SysClientVisit/add', model, function(res) {
                sa.alert('增加成功', function() {
                    sa.closeModel();
                    sa.currView().f5();
                });
            });
        } else {
            // 如果是修改 
            sa.ajax('/SysClientVisit/update', model, function(res) {
                sa.alert('修改成功', function() {
                    sa.closeModel();
                    sa.currView().f5();
                });
            });
        }
    }
});


</script>

<style scoped>

</style>
